import * as Cesium from 'cesium'
import { SyncCesiumWithThree } from '../../components/cesium-three/SyncCesiumWithThree.js'
import { getSceneByName } from '../../components/three/ThreeScene.vue'
import { MyMapControls } from '../../components/three/controls/MyMapControls.js'


export function toggleMapControls(enabled, targetWorldPosition) {
    const scene = getSceneByName('threeScene')
    const trw = document.querySelector('.three-root-wrapper')

    const syncCesium = () => {
        SyncCesiumWithThree.instance.sync()
    }

    if (enabled) {
        trw.style.pointerEvents = 'auto'

        MyMapControls.instance?.dispose()
        MyMapControls.instance = new MyMapControls(
            scene.my.camera,
            trw.firstElementChild
        )
        MyMapControls.instance.fixControls(
            targetWorldPosition,
            Cesium.Cartographic.fromCartesian(
                new Cesium.Cartesian3(...targetWorldPosition)
            )
        )

        scene.my.preRender.push(syncCesium)
    } else {
        trw.style.pointerEvents = 'none'

        MyMapControls.instance.enabled = false

        scene.my.preRender.splice(scene.my.preRender.indexOf(syncCesium), 1)
    }
}
